<template>
	<view class="content" :class="{contentbg:!boxType}">
		<view>
			<!-- 手机号登录 -->
		   <view class="login_box" v-if="boxType"> 
             <view class="uni-column">
                <input type="text" class="login-input" maxlength="11" focus v-model="loginForm.phone" placeholder="请输入常用手机号码" />
            </view>
						<view class="max-column">
							<view class="uni-column">
									<input class="login-input" type="text"  maxlength="6" v-model="loginForm.code" placeholder="输入验证码" />
							</view>
							<view class="btn-yzm" @click="btnCode" :class="{on:count==0}">{{count==0?yzText:''}} <text v-if="count!=0"> {{count}}s</text></view>
						</view>
						<button class="btn_login" :class="{on:loginStatus}" @tap="btnLogin">登录</button>  
						<view class="changetext" @click="btnChangeLogin">微信用户快速登录</view>

						<view class="xieyi">
							<text class="iconfont  icon-gouxuan" />
							未曾注册过的手机号，登录时将自动注册，且代表 您已阅读并同意<text class="red">《注册协议》</text>与<text class="red">《隐私政策》</text> 
						</view>

    </view>
<!-- 微信小程序登录 -->
			<view v-if="!boxType">
				    <view class="xcx-box">
                  <image class="xcimg" src="/static/login/1.png" />
						</view>
					<button
          class="btnXCX"
          open-type="getUserInfo"
          withCredentials="true"
          @getuserinfo="wxGetUserInfo"
        >
          <image class="wximg" src="/static/login/2.png" /> 微信用户快速登录
        </button>

						<view class="changetext" @click="btnChangeLogin">手机号快速登录</view>
							<view class="xieyi">
							登录即代表你同意我们的 <text class="red">《服务协议》 </text>和<text class="red">《隐私政策》</text> 
						</view>
			</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {  
					phone: '',
					code: '',
			 },
			 boxType:true,
			 loginStatus:false,
			  show: true,
				count:0,
				timer: null,
				yzText:'获取验证码'
			}
		},    
		onLoad() 
		{
			uni.getLocation({
				type: 'wgs84',
				success: function (res) {
					console.log(res)
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
		},
		watch:{
			loginForm: {
      handler: function (val, oldVal) { 
       if(val.phone!='' && val.code !=''){
				 this.loginStatus =true;
			 }else{
				 this.loginStatus=false;
			 }
			},
      deep: true
    },
		},
		methods: {
			btnChangeLogin(){
       this.boxType=!this.boxType;
			},
			wxGetUserInfo(e){
			//	console.log(e);
					 var self = this;
					self.$api.ajax({
						  data:{
								iv:e.detail.iv,
								encryptedData:e.detail.encryptedData
							},
		        	url:'member/security/weixin/login',
		        	method:'post',
		        	success:function(data){
								console.log(data);
								if(data.tatusBool){
                   uni.redirectTo({ url: '/pages/receive/index'});                 
								}else{
									console.log(data);
								}
		        	}
		      })
			},
      btnLogin(){
				uni.redirectTo({ url: '/pages/index/index'});
								// console.log(self.loginForm)
				// let self = this;
				// 	self.$api.ajax({
				// 		  data:self.loginForm,
		    //     	url:'login.action',
		    //     	method:'post',
		    //     	success:function(data){
				// 				console.log(data);
				// 				if(data.tatusBool){
        //            uni.redirectTo({ url: '/pages/receive/index'});                 
				// 				}else{
				// 					alert(data.message);
				// 				}
		    //     	}
				//   })
				
				// 只允许通过相机扫码
			//	uni.redirectTo({ url: '/pages/index/index'});
					// uni.scanCode({
					// 		// onlyFromCamera: true,
					// 		success: function (res) {
					// 				console.log('条码类型：' + res.scanType);
					// 				console.log('条码内容：' + res.result);
					// 		}
					// });
           //  uni.redirectTo({ url: '/pages/index/index'});
				// uni.getUserInfo({
				// 		// provider: 'weixin',
				// 		success: function (infoRes) {
				// 			console.log( infoRes);
				// 		},
				// 		fail:function (e) {
				// 			console.log(e);
							
				// 		}
				// 	});
			// 	uni.login({
			// 	provider: 'weixin',
			// 	success: function (loginRes) {
			// 		console.log(loginRes.code);

			// 		 uni.getUserInfo({
			// 			provider: 'weixin',
			// 			success: function (infoRes) {
			// 				console.log( infoRes);
			// 			}
			// 		});
			// 	}
			// });
				 // uni.redirectTo({ url: '/pages/index/index'});
				// var self = this;
				// console.log(self.loginForm)
				// 	self.$api.ajax({
				// 		  data:self.loginForm,
		    //     	url:'login.action',
		    //     	method:'post',
		    //     	success:function(data){
				// 				console.log(data);
				// 				if(data.tatusBool){
        //            uni.redirectTo({ url: '/pages/receive/index'});                 
				// 				}else{
				// 					alert(data.message);
				// 				}
		    //     	}
		    //   })
			},
			btnCode(){
			// 	uni.showToast({
			// 		title: '请输入正确的手机号',
			// 		duration: 2000
			// });
		

			 var self = this;
					self.$api.ajax({
						  data:{
								
							},
		        	url:'member/security/captcha/'+self.loginForm.phone,
		        	method:'get',
		        	success:function(data){
								console.log(data);
		        	}
		      })

			//uni.showToast({ icon: 'none',position:'top', title: '请输入正确的手机号' });
		//	this.$message('请输入正确的手机号');
				//this.getCode();
			},
			getCode(){
				const TIME_COUNT = 60;
				if (!this.timer) {
				this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
				if (this.count > 0 && this.count <= TIME_COUNT) {
					this.count--;
					} else {
					this.show = true;
					clearInterval(this.timer);
					this.timer = null;
					}
				}, 1000)
				}
		  }
		}
	}
</script>

<style  lang="scss" scoped>
	.content {
		text-align: center;
		height: 100vh;
		 -webkit-overflow-scrolling: touch;
		 background-color: #f5f5f5;
	}
	.contentbg {
		 background-color: #fff;
	}
	.login_box{
		text-align: center;
		padding-top: px2vw(50);
	}

 .login_box .uni-column{
	  position: relative;
    height: px2vw(50);
    width: px2vw(350);
    margin: 0 auto px2vw(20) auto;
		background-color: #fff;
		border: px2vw(1) solid #E5E5E5;
		border-radius: px2vw(5);
 }

	.login_box .max-column{
	  position: relative;
    height: px2vw(50);
    width: px2vw(350);
		margin: 0 auto;
		.uni-column{
			height: px2vw(50);
       width: px2vw(215);
			margin: 0 auto px2vw(20) 0;
			.login-input{
				width: px2vw(100);
			}
		}
		.btn-yzm{
			height: px2vw(50);
			line-height: px2vw(50);
      width: px2vw(125);
			font-size: px2vw($fz16);
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: - px2vw(25);
			background-color: #F24244;
			color: #fff;
			border-radius: px2vw(5);
		}
		.btn-yzm.on{
				background-color: #888;
		}
	}
.login_box .uni-column .login-input{
	 position: absolute;
	 left: 0;
	 font-size: px2vw($fz16);
	 width: px2vw(200);
   text-align: left;
	 bottom:px2vw(10);
	 height: px2vw(30);
	 line-height: px2vw(30);
	 padding-left: px2vw(20);
	}
	.btn_login{
		width: px2vw(350);
		margin: 0 auto;
		margin-top: px2vw(50);
		height: px2vw(50);
		line-height: px2vw(50);
		background-color: #F4F4F4;
		text-align: center;
		font-size: px2vw($fz16);
		color: #000;
	}
	.btn_login.on{
		background-color: #F24244;
		color: #fff;
	}
.xieyi{
	font-size: px2vw($fz14);
	color: #8D8D8D;
	position: relative;
	width: px2vw(300);
	margin: px2vw(100) auto 0 auto;
	text-align: left;
	padding: px2vw(20) px2vw(0);
	.red{
		color: #F24244;
	}
	.icon-gouxuan{
		position: absolute;
		left: - px2vw(25);
		color: #F24244;
		border: px2vw(1) solid #ddd;
		font-size: px2vw($fz14);
		height: px2vw(20);
		width: px2vw(20);
		border-radius: px2vw(5);
		text-align: center;
		line-height: px2vw(23);
	}
}
.xcx-box{
	text-align: center;
	width: px2vw(122);
	height: px2vw(122);
	line-height: px2vw(122);
	border-radius: px2vw(122);
	margin: px2vw(50) auto px2vw(100) auto;
	background-color: #F5F5F5;
	position: relative;
	.xcimg{
		height: px2vw(77);
		width: px2vw(70);
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: - px2vw(38.5);
		margin-left: - px2vw(35);
	}
}
.btnXCX{
	height: px2vw(50);
	width: px2vw(345);
	margin: 0 auto;
	text-align: center;
	line-height: px2vw(50);
	font-size: px2vw($fz16);
	color: #fff;
	background-color: #31CB08;
	border-radius: px2vw(5);
	.wximg{
		height: px2vw(23);
		width: px2vw(29);
		vertical-align: middle;
		padding-right:px2vw(5);
	}
}
.changetext{
	text-align: center;
	font-size: px2vw($fz16);
	padding-top: px2vw(20);
	color: #999;
}
</style>
